import React, { Component } from 'react';
import style from './Find.module.scss';
import { getFindListUrl } from '@/api'

export default class index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            findDateList: []
        }
    }
    render() {
        return (
            <div className={style.findeboxWai}>
                <div className={style.findBox}>
                    <a className={style.shopitembox} href='https://h5.ele.me/exchange/'>
                        <p className={style.shopleftTitone}>金币商城</p>
                        <p className={style.shopleftTitTwo}>0元好物在这里</p>
                        <img className={style.shopleftImg} src={require('@/static/imges/Shop.webp')} alt="" />
                    </a>
                    <div className={style.shopitemboxTwo}>
                        <a className={style.shopitemRightbox} href='https://h5.ele.me/commend/#/'>
                            <div>
                                <p className={style.shopRightTitOne}>推荐有奖</p>
                                <p className={style.shopleftTitTwo}>20元现金拿不停</p>
                            </div>
                            <img src={require('@/static/imges/recommend.webp')} className={style.rightImg} alt="" />
                        </a>
                        <a className={style.shopitemRightbox} href='https://h5.ele.me/discover/koubei/'>
                            <div>
                                <p className={style.shopRightTitTwo}>周边优惠</p>
                                <p className={style.shopleftTitTwo}>领取口碑好券</p>
                            </div>
                            <img src={require('@/static/imges/Discount.webp')} className={style.rightImg} alt="" />
                        </a>
                    </div>
                </div>
                <div className={style.findBoxTwo}>
                    <div className={style.screenTitle}>
                        <div className={style.horizontalBar}></div>
                        推荐商家
                        <div className={style.horizontalBar}></div>
                    </div>
                    <p className={style.subtitle}>金币换豪礼</p>
                    <ul className={style.recommendUl}>
                        {
                            this.state.findDateList.map((item, index) => {
                                console.log(item);
                                if (index < 3) {
                                    return (
                                        <a key={index} className={style.recommendLi} href={item.url}>
                                            <div className={style.recommendLiImgBox}>
                                                <img className={style.recommendLiImg} src={item.image_hash} alt="" />
                                                <span className={style.recommendLiTips}>{item.corner_marker}</span>
                                            </div>
                                            <p className={style.recommendLiTit}>{item.title}</p>
                                            <p className={style.recommendLiPrice}>
                                                <span className={style.required}>{item.points_required}金币</span>
                                                <del className={style.original}>￥{item.original_price}</del>
                                            </p>
                                        </a>
                                    )
                                }
                                return ''
                            })
                        }
                    </ul>
                    <a className={style.goMore} href='https://h5.ele.me/exchange/'>查看更多</a>
                </div>
            </div>

        )
    }
    componentDidMount() {
        getFindListUrl().then((res) => {
            this.setState({
                findDateList: res
            })
        })
    }
}
